<template>
    <div class="row full-height">
        <div class="col-sm-8 audio-area">
            <div class="row">
                <div class="media col-sm-6" v-for="">
                    <div class="">
                        <div class="media-left">
                            <img class="media-object"  style="width: 40px; height: 40px;" src="../img/timg.gif" />
                        </div>
                        <div class="media-body">
                            <h5>张三</h5>
                            <audio autoplay controls></audio>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 message-wrap">
            <div class="msg-wrap">
                <div class="media"  v-for="">
                    <div>
                        <div class="media-left">
                            <img class="media-object"  style="width: 32px; height: 32px;" src="../img/01.jpg" />
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">张三</h5>
                            <small class="col-sm-10">Location H-2, Ayojan Nagar, Near Gate-3, Near
                                        Shreyas Crossing Dharnidhar Derasar,
                                        Paldi, Ahmedabad 380007, Ahmedabad,
                                        India
                                        Phone 091 37 669307
                                        Email aapamdavad.district@gmail.com</small>
                        </div>
                    </div>
                    <div>
                        <div class="media-body">
                            <small class="col-sm-offset-2 col-sm-10">Location H-2, Ayojan Nagar, Near Gate-3, Near
                                        Shreyas Crossing Dharnidhar Derasar,
                                        Paldi, Ahmedabad 380007, Ahmedabad,
                                        India
                                        Phone 091 37 669307
                                        Email aapamdavad.district@gmail.com</small>
                        </div>
                        <div class="media-right">
                            <img class="media-object"  style="width: 32px; height: 32px;" src="../img/01.jpg" />
                        </div>
                    </div>                   
                </div>
            </div>
            <div class="send-wrap">
                <!--<div>
                    <span class="iconstyle glyphicon glyphicon-font" aria-hidden="true"></span>
                    <router-link to="/AudioChat"><span class="iconstyle glyphicon glyphicon-headphones" aria-hidden="true"></span></router-link>
                    <router-link to="/VideoChat"><span class="iconstyle glyphicon glyphicon-facetime-video" aria-hidden="true"></span></router-link>
                </div>-->
                <textarea class="form-control send-message" rows="2" style="box-shadow: none"></textarea>
                <div style="text-align:right">
                    <button class="btn btn-default">发送</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        props:['WebRTC'],
        data(){
            return {

            }
        }
    }
</script>

<style scoped>
.audio-area{
    height:100%;
    overflow: auto;
}
.message-wrap{
    box-shadow: 0 0 3px #ddd;
    padding:0;
    height: 100%;    
}
.msg-wrap{
    padding:5px;
    /*border-bottom:1px solid #ddd;*/
    margin:0;
    overflow: auto;
    height: 80%;
}
.send-wrap{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding:10px;
    height: 15%;
    /*background: #f8f8f8;*/
}
.send-message{
    resize: none;
    border: 0;
}

.iconstyle{
    font-size: 18px;
    margin:0 5px;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 10px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}
</style>